<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">{{title}}</view>
		</view>	
		<view class="nav" :class="scrrol == true ? 'scrrolHeader02' : ''">
			<view class="navauto">
				<block v-for="(item, index) in menu" :key="index">
					<view class="menu" :data-index="index" @tap="setNavMenu">
						<view class="text" :class="index == select ? 'menucolor' : ''">{{ item.name }}
						   <view class="line" :class="index == select ? 'menucolor02' : ''"></view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="clear_box"></view>
		<view class="clear_box02"></view>
		<view class="fun_box">
			<view class="icon iconfont icon-sousuo"></view>
			<input type="text" v-model="search_key" placeholder="输入车架号后六位查询" placeholder-style="color:#5E6470" />
			<view class="menu" @click="search_word">搜索</view>
		</view>
		<block v-for="(item, idx) in list" :key="item.id">
		<view class="goods">
			<view class="top">
				<view class="hao">订单编号：{{ item.order_no }}</view>
				<view class="botn02" v-if="stype == -1 && item.stype==0">维保</view>
				<view class="botn02" v-if="stype == -1 && item.stype==1">出险</view>
				<view class="botn02" v-if="stype == -1 && item.stype==2">里程</view>
				<view class="botn02" v-if="stype == -1 && item.stype==7">电池</view>
				<view class="gong" v-if="item.status == 1">待支付</view>
				<view class="gong" v-if="item.status == 2">已支付</view>
				<view class="gong" v-if="item.status == 3">成功</view>
				<view class="gong" v-if="item.status == 4">失败</view>
				<view class="gong" v-if="item.status == 5">已退款</view>
			</view>
			<view class="content">
				<view class="tup"><image :src="item.img_path" mode=""></image></view>
				<view class="left">
					<view class="jia">车架号:{{ item.vin }}</view>
					<view class="time">{{ item.create_at }}</view>
					<view class="zuob">
						<view class="money">￥{{ item.pay_price }}</view>
						<block v-if="item.status == 3" >
							<view class="botn01" @click="to_look(item)" v-if="item.stype == 0 || item.stype == 2">查看结果</view>
							<view class="botn01" v-else>
								<view class="botn01" @click="to_web(item.req_data.report.reportUrl)">查看报告</view>
								<!-- <view class="botn01" @click="to_web(item.lemon_data.report.reportUrl)" v-if="item.stype > 3 ">查看出险</view> -->
								<!-- <u-link :href="item.req_data.report.reportUrl" color="#000" text="查看"></u-link> -->
							</view>	
						</block>
						
						<view class="botn01" @click="to_search(item,stype)" v-if="item.status == 1">去付款</view>
						<!-- <view class="botn02" @click="to_search(item)" v-if="item.status == 4 && item.stype==0" >去复查</view>
						<view class="botn01" @click="to_search(item,1)" v-if="(item.status == 1 || item.status == 2) && item.stype==4">去查询</view>
						<view class="botn02" @click="to_search(item,1)" v-if="item.status == 4 && item.stype == 4" >去复查</view>
						<view class="botn01" @click="to_search(item,0)" v-if="(item.status == 1 || item.status == 2) && item.stype==6">复查维保</view>
						<view class="botn02" @click="to_search(item,1)" v-if="item.status == 4 && item.stype == 6 " >复查出险</view> -->
						<!-- <view class="botn02" style="margin-left:-6vw;" @click="to_refund(item)" v-if="item.status == 4 || item.status == 6">申请退款</view> -->
						<!-- <view class="botn02" @click="to_del(item)" v-if="item.status == 5">删除</view> -->
					</view>
					
				</view>
			</view>
		</view>
		</block>
		<block v-if="empty_show">
			<view style="height: 10vh;padding-top: 10vw;text-align: center;">
				<u-empty text="没有更多了" mode="list">没有更多了</u-empty>
			</view>
		</block>
		<u-modal :show="modal_show"  :title="title" @confirm="modal_close">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				scrrol:false,
				list:[],
				select:0,
				menu: [
					{
						name: '全部'
					},
					{
						name: '待支付'
					},
					{
						name: '查询完成'
					},
					{
						name: '查询失败'
					},
				],
				status:0,
				title : '我的订单',
				empty_show:0,
				search_key:'',
				stype:'',
				modal_show : false,
			}
		},
		onLoad(opt) {
			let that = this;
			that.stype = opt.stype || ''; 
			if (opt.stype == 0){
				that.title = '维保订单';
			}
			if (opt.stype == 1){
				that.title = '出险订单';
			}
			if (opt.stype == 6){
				that.title = '综合订单';
			}
			if (opt.stype == 2){
				that.title = '里程订单';
			}
			if (opt.stype == 7){
				that.title = '电池订单';
			}
			that.loadData();
		},
		onShow() {
			let that = this;
			let order_list = uni.getStorageSync('order_list');
			if (order_list){
				that.page = 1;
				that.loadData();
				uni.removeStorageSync('order_list');
			}
		},
		methods: {
			setNavMenu(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.select = index;
				that.status = index;
				that.page = 1;
				that.loadData();
			},
			loadData() {
				let that = this;
				let params = {
					stype : that.stype,
					status : that.select,
					keyword : that.search_key,
					page : that.page
				}
				that.Net._get('auth/order/car_order_list', params, res => {
					if (res.code == 1) {
						that.list = res.data;
						if (that.list.length == 0){
							that.empty_show = 1;
						}else{
							that.empty_show = 0;
						}
					}else{
						that.empty_show = 1;
					}
				});
			},
			to_web(url){
				let arg = encodeURIComponent(url);
				this.$r('/pages/public/web_view?url='+arg);
			},
			to_del(item){
				if(item.status != 5){
					this.Msg.Fail('该订单状态不对');
					return '';
				}
				this.throttle(this.real_del(item.id),1500);
			},
			real_del(oid){
				uni.showModal({
				    title: '确认提示',
				    content: '是否确认删除该订单',
				    success:(res) => {
				        if (res.cancel){
				            return false;
				        }
						uni.showLoading({
							title: '删除中'
						});
				        this.Net._post('auth/order/car_order_del', {order_id:oid}, res => {
				        	if (res.code == 1) {
								uni.hideLoading();
				        		this.Msg.Success('删除成功', res => {
				        			let index = this.list.findIndex(val => val.id === oid);
									this.list.splice(index, 1);
				        		});
				        	}else{
								uni.hideLoading();
								this.Msg.Fail(res.msg);
							}
				        });
				    }
				});
			},
			to_refund(item){
				if(item.status != 4){
					this.Msg.Fail('该订单状态不可退款');
					return '';
				}
				this.throttle(this.real_refund(item.id),1500);
			},
			real_refund(oid){
				uni.showLoading({
					title: '申请中'
				});
				this.Net._post('auth/order/refund_hand', {order_id:oid}, res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.Msg.Success('退款成功,请稍后查看微信', res => {
							let index = this.list.findIndex(val => val.id === oid);
							this.list[index].status = 5;
							this.$forceUpdate();
						});
					}else{
						this.Msg.Fail(res.msg);
					}
				});
			},
			modal_close(){
				this.modal_show = false;
			},
			to_look(order){
				let stype = parseInt(order.stype);
				uni.setStorageSync('report_order0',order);
				uni.navigateTo({
					url: '/pages/service/report?type='+stype+'&title='+this.title
				});
			},
			to_search(order,is_wb=0){
				let stype = parseInt(order.stype);
				uni.setStorageSync('car_order0',order);
				uni.navigateTo({
					url: '/pages/index/records_edit?type='+stype+'&is_wb='+is_wb+'&title='+this.title
				});
			},
			search_word(){
				if(this.search_key != '' && this.search_key.length != 6){
					this.Msg.Fail('请输入车架的后6位数查询');
					return false;
				}
				this.page = 1;
				this.loadData();
			},
			throttle(fn, delay) {
				let timer = null;
				return function() {
					let context = this, args = arguments;
					if (!timer) {
						timer = setTimeout(() => {
							fn.apply(context, args);
							timer = null;
						}, delay);
					}
				};
			},
			backPage() {
				let service_pay = uni.getStorageSync('service_pay');
				if (service_pay){
					uni.removeStorageSync('service_pay');
					uni.switchTab({
						url: '/pages/personalcenter/personalcenter'
					});
					return '';
				}else{
					uni.navigateBack({});
				}
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
			var that = this;
			that.page ++;
			that.Net._get('auth/order/car_order_list', {per_page:'10',page:that.page,status:that.status}, res => {
				if (res.code == 1) {
					//console.log(res)
					if (res.data == '') {
						uni.showToast({
							title: '没有更多了',
							duration: 2000,
							icon: 'none'
						});
						that.empty_show = 1;
					} else {
						that.list = that.list.concat(res.data); //将数据拼接在一起
					}
				} else if (res.code == 0) {
					that.Msg.Success(res.msg, res => {});
				}
			});
		},
	}
</script>

<style>
	.header{
		background-color: transparent !important;
		height: 20vw !important;
	}
	
	.header .text{
		background-color: transparent !important;
		color: #333 !important;
	}
	
	.header .back{
		color: #333 !important;
	}
	
	.scrrolHeader{
		background-color: #F9E9E3 !important;
	}
	
	.scrrolHeader02{
		background-color: #F9E9E3 !important;
	}
	
	.clear_box02{
		height: 13.5vw !important;
	}
	
	.nav {
		width: 100%;
		height: 13.5vw;
		overflow: hidden;
		overflow-x: auto;
		position: fixed;
		left: 0;
		top: calc(13.4vw + var(--status-bar-height));
		z-index: 99;
		/* background-color: #fff;
			border-bottom: 1px solid #e8e8e8; */
		box-sizing: border-box;
	}
	
	.nav .navauto {
		width: fit-content;
		display: flex;
		justify-content:space-around;
		/* margin-left: 4%; */
		min-width: 100%;
	}
	
	.nav .navauto .menu {
		/* width: 20%; */
		
	}
	
	.nav .navauto .menu .text {
		font-size: 4.5vw;
		color: #666666;
		text-align: center;
		line-height: 13.5vw;
		position: relative;
	}
	
	.nav .navauto .menu .line {
		width: 100%;
		height: 2.3vw;
		background-color: #FF7701;
		border-radius: 2.3vw;
		position: absolute;
		left: calc(50% - 50%);
		bottom: 3.5vw;
		z-index: -1;
		display: none;
		
	}
	
	.menucolor {
		color: #091624 !important;
		font-weight: bold;
		font-size: 4.7vw !important;
	}
	
	.menucolor02 {
		display: block !important;
	}
	
	.menucolor03 {
		background-color: #FF9822 !important;
	}
	
	.goods{
		width: calc(92% - 6vw);
		padding: 3vw;
		background-color: #fff;
		margin:3vw auto 0vw;
		border-radius: 2vw;
	}
	.top{
		display: flex;
		justify-content: space-between;
		width: 100%;
		align-items: center;
		border-bottom: 1px solid #f7f7f8;
		padding-bottom: 2vw;
	}
	.hao{
		color: #333;
		font-size: 3.5vw;
	}
	.gong{
		color: #e6201f;
		font-size: 3.5vw;
		font-weight: bold;
	}
	.content{
		display: flex;
		margin-top: 2vw;
	}
	
	.tup{
		width: 25vw;
		height: 18vw;
	}
	.tup image{
		width: 100%;
		height: 100%;
		border-radius: 2vw;
	} 
	.left{
		width: calc(100% - 27vw);
		margin-left: 2vw;
	}
	.jia{
		color: #333;
		font-weight: bold;
		font-size: 3.3vw;
	}
	.time{
		color: #999;
		font-size: 3.5vw;
		margin-top: 1vw;
	}
	.zuob{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 2vw;
	}
	.money{
		color: #e6201f;
		font-size: 3.8vw;
		
	}
	.botn01{
		background-color: #ffcc32;
		color: #000;
		font-size: 3.5vw;
		height: 6vw;
		line-height: 6vw;
		padding: 0vw 2vw;
		text-align: center;
		border-radius: 1vw;
		display: flex;
		align-items: center;
	}
	.botn02{
		background-color: #eaebec;
		color: #333;
		font-size: 3vw;
		height: 6vw;
		line-height: 6vw;
		padding: 0vw 2vw;
		text-align: center;
		border-radius: 1vw;
	}
	.fun_box{
		width: calc(92% - 3vw);
		margin:3vw auto 0vw;
		background-color: #ffffff;
		height: 11vw;
		align-items: center;
		border-radius: 2vw;
		display: flex;
		padding-left: 3vw;	
	}
	.fun_box .troll{
		color: #979AA9;
		font-size: 4vw;
	}
	input{
		font-size: 3.5vw;
		color: #5E6470;
		line-height: 6vw;
		height: 5vw;
		padding-left: 2vw;
		width: 85%;
	}	
</style>
